import React from 'react';
import {Card, Image} from "antd";
import {useNavigate} from "react-router-dom";
import classes from './index.module.scss'


const CourseItem = (props) => {
    const {title, describe, author_name, now_price, old_price, cover, sort} = props.course
    //前往课程界面
    const nav = useNavigate()
    const goToCourseContent = (id) => {
        id = props.course.id
        nav(`/course-content/${id}`)
    }

    return (
        <div>
            <Card
                onClick={goToCourseContent}
                className={classes.CourseContent} bordered={false}
                bodyStyle={{
                    width: "100%",
                    height: 200,
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center"
                }}>
                <div>
                    <Image style={{width: 120}}
                           src={cover}/>
                </div>
                <div className={classes.CourseIntro}>
                    <div className={classes.CourseTitle}>
                        <span className={classes.New}>{sort}</span>
                        <span className={classes.Text}>{title}</span>
                    </div>
                    <p>{describe}</p>
                    <span>{author_name}</span>
                    <div className={classes.Price}>
                        <span className={classes.now_price}>￥{now_price}</span>
                        <span className={classes.old_price}>￥{old_price}</span>
                    </div>
                </div>
            </Card>
        </div>


    );
};

export default CourseItem;